﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {

            $("#s2").css("height", $("#s1").text() * 2);
            $("#s3").css("padding-top", 220 - parseInt($("#s1").text() * 2))
            $("#z2").css("height", $("#z1").text() * 2);
            $("#z3").css("padding-top", 220 - parseInt($("#z1").text() * 2))
            $("#y2").css("height", $("#y1").text() * 2);
            $("#y3").css("padding-top", 220 - parseInt($("#y1").text() * 2))
            $("#zz2").css("height", $("#zz1").text() * 2);
            $("#zz3").css("padding-top", 220 - parseInt($("#zz1").text() * 2))
            $("#wu2").css("height", $("#wu1").text() * 2);
            $("#wu3").css("padding-top", 220 - parseInt($("#wu1").text() * 2))
            $("#d2").css("height", $("#d1").text() * 2);
            $("#d3").css("padding-top", 220 - parseInt($("#d1").text() * 2))
            $("#li2").css("height", $("#li1").text() * 2);
            $("#li3").css("padding-top", 220 - parseInt($("#li1").text() * 2))
            $("#sh2").css("height", $("#sh1").text() * 2);
            $("#sh3").css("padding-top", 220 - parseInt($("#sh1").text() * 2))

        })
    </script>

</head>
<body>
    <div>
        @foreach (var item in Model)
        {
            <div id="s3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="s1" style="width: 30px;">@item.yu</div>
                <div id="s2" style="width: 30px; height: 50px; background-color: #ff0000;">
                </div><h5>语文</h5>
            </div>
            <div id="z3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="z1" style="width: 30px;">@item.shu</div>
                <div id="z2" style="width: 30px; height: 50px; background-color: #00ffff;">

                </div><h5>数学</h5>
            </div>
            <div id="y3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="y1" style="width: 30px;">@item.yin</div>
                <div id="y2" style="width: 30px; height: 50px; background-color: #0000FF;">

                </div><h5>英语</h5>
            </div>
            <div id="zz3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="zz1" style="width: 30px;">@item.zhen</div>
                <div id="zz2" style="width: 30px; height: 50px; background-color: #00FF93;">

                </div><h5>政治</h5>
            </div>
            <div id="wu3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="wu1" style="width: 30px;">@item.wu</div>
                <div id="wu2" style="width: 30px; height: 50px; background-color: #D77700;">

                </div><h5>物理</h5>
            </div>
            <div id="d3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="d1" style="width: 30px;">@item.di</div>
                <div id="d2" style="width: 30px; height: 50px; background-color: #FFAFDB;">

                </div><h5>地理</h5>
            </div>
            <div id="li3" style="height:240px;width:30px;float:left;margin-left:20px">
                <div id="li1" style="width: 30px;">@item.li</div>
                <div id="li2" style="width: 30px; height: 50px; background-color: #F20A73;">

                </div><h5>历史</h5>
            </div>
    <div id="sh3" style="height:240px;width:30px;float:left;margin-left:20px">
        <div id="sh1" style="width: 30px;">@item.shen</div>
        <div id="sh2" style="width: 30px; height: 50px; background-color: #FFF2AF;">

        </div><h5>生物</h5>
    </div>
        }
    </div>
</body>
</html>
